<!-- 安全管理-缺失管理页面 -->
<template>
  <div>
    <div v-show="isMain" class="equip-wrap-common">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="6">
            <px-form-item label="缺失描述">
              <px-input
                v-model="queryParams.missingDesc"
                placeholder="请输入缺失描述"
                maxlength="50"
                clearable
                @blur="queryParams.missingDesc = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
          </px-col>
          <px-col :span="6">
            <EquipSystemTree
              :className="queryParams.className"
              :systemCode="queryParams.systemCode"
              @changeAllSystemCodes="changeAllSystemCodes"
              @changeSystemCodes="changeSystemCodes"
              @clearSystem="clearSystem"
            />
          </px-col>
          <px-col :span="6">
            <px-form-item label="缺失等级">
              <px-select v-model="queryParams.missingLevel" placeholder="请选择缺失等级" filterable clearable>
                <px-option v-for="(item, index) in missingLevelList" :key="index" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="缺失类别">
              <px-select v-model="queryParams.missingType" placeholder="请选择缺失类别" filterable clearable>
                <px-option v-for="(item, index) in missingTypeList" :key="index" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="上报人">
              <px-select-v2
                v-model="queryParams.reportUserId"
                filterable
                clearable
                :options="reportUserList"
                placeholder="请选择上报人"
                @change="reportUserChange"
                @focus="focusReportUser"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="责任人">
              <px-select-v2
                v-model="queryParams.missingOwner"
                filterable
                clearable
                :options="missingOwnerList"
                placeholder="请选择责任人"
                @focus="focusMissingOwner"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="缺失位置">
              <px-tree-select
                v-model="queryParams.missingPosition"
                style="width: 100%"
                :data="positionList"
                :props="{ children: 'children', label: 'name', id: 'facCode' }"
                node-key="id"
                check-strictly
                :render-after-expand="false"
                placeholder="请选择缺失位置"
                filterable
                clearable
                @focus="focusPosition"
                @node-click="nodeClick"
                @clearable="queryParams.missingPosition = ''"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="上报日期" prop="reportDate">
              <px-date-picker
                v-model="queryParams.reportDate"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="结案日期" prop="finishDate">
              <px-date-picker
                v-model="queryParams.finishDate"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeFinishDate"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="整改状态" prop="rectifyStatusList">
              <px-select
                v-model="queryParams.rectifyStatusList"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="2"
                placeholder="请选择整改状态"
                clearable
                filterable
              >
                <px-option v-for="(item, index) in tabList" :key="index" :label="item.label" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <div class="equip-table-btn">
        <px-button v-has="'ALL_SAFEMANAGE_DEFECT_REPORT'" type="primary" @click="defectReport">新增缺失</px-button>
      </div>
      <px-table :data="tableData" class="equip-table" size="small" :height="isFromHandover ? '500px' : 'calc(100vh - 388px)'" border>
        <px-table-column label="序号" width="80" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <px-button v-if="item.missingId && showRowText('ALL_SAFEMANAGE_DEFECT_VIEW')" link type="primary" @click="handleView(scope.row)">
              {{ scope.row.missingId }}
            </px-button>
            <span v-else-if="item.missingId && !showRowText('ALL_SAFEMANAGE_DEFECT_VIEW')">{{ scope.row.missingId }}</span>
            <span v-else-if="item.missingDesc">
              <px-tooltip placement="top" :content="scope.row.missingDesc">
                <div class="table-ellipsis">{{ scope.row.missingDesc }}</div>
              </px-tooltip>
            </span>
            <span v-else-if="item.missingLevel">
              {{ scope.row.missingLevelDesc || "-" }}
            </span>
            <span v-else-if="item.reportTime">
              <span v-if="scope.row.reportTime">{{ scope.row.reportTime.split(" ")[0] }}</span>
              <span v-else>-</span>
            </span>
            <span v-else-if="item.rectifyTime">
              <span v-if="scope.row.rectifyTime">{{ scope.row.rectifyTime.split(" ")[0] }}</span>
              <span v-else-if="scope.row.delayRectifyTime">{{ scope.row.delayRectifyTime.split(" ")[0] }}</span>
              <span v-else>-</span>
            </span>
            <span v-else-if="item.missingPictureList" style="display: flex">
              <img
                v-for="(file, index) in scope.row.missingPictureList || []"
                :key="index"
                style="width: 28px; height: 28px; margin-right: 8px; cursor: pointer"
                :src="file.url || file.fileUrl"
                alt=""
                @click="photoPreview(scope.row.missingPictureList, file)"
              />
            </span>
            <span v-else-if="item.rectifyStatus">
              <px-tag
                v-if="scope.row.rectifyStatus"
                effect="plain"
                :style="{
                  color: `${tagColorList[scope.row.rectifyStatus]}`,
                  border: `1px solid ${tagBorderColorList[scope.row.rectifyStatus]}`,
                  backgroundColor: `${tagBgColorList[scope.row.rectifyStatus]}`
                }"
              >
                {{ scope.row.rectifyStatusDesc }}
              </px-tag>
              <span v-else>-</span>
            </span>
            <span v-else-if="item.missingOwnerNameList">
              <template v-if="scope.row.missingOwnerNameList && scope.row.missingOwnerNameList.length > 0">
                <px-tag v-for="(item, index) in scope.row.missingOwnerNameList" :key="index">
                  {{ item }}
                </px-tag>
              </template>
              <span v-else>-</span>
            </span>
            <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" width="200" align="center">
          <template #default="scope">
            <!-- 详情 -->
            <px-tooltip content="详情" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_VIEW'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="scope.row.rectifyStatus === 'UNRESPONSE' && reportUserName == scope.row.reportUser" content="编辑" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="scope.row.rectifyStatus === 'UNRESPONSE'" content="回复整改日期" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_REPLY_DATE'" link type="primary" icon="Rollback" @click="handleReplyRectifyDate(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="scope.row.rectifyStatus === 'UNRESPONSE' && reportUserName == scope.row.reportUser" content="删除" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_DELETE'" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
            </px-tooltip>
            <px-tooltip
              v-if="scope.row.rectifyStatus === 'DOING' || scope.row.rectifyStatus === 'DELAY' || scope.row.rectifyStatus === 'UNDO'"
              content="整改"
              placement="top"
            >
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_IMPROVE'" link type="primary" icon="Backtop" @click="handleRectify(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="scope.row.rectifyStatus === 'DELAY' || scope.row.rectifyStatus === 'UNDO'" content="整改中" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_DOING'" link type="primary" icon="DocumentAdd" @click="handleDoing(scope.row)" />
            </px-tooltip>
            <px-tooltip
              v-if="scope.row.rectifyStatus === 'DOING' || scope.row.rectifyStatus === 'DELAY' || scope.row.rectifyStatus === 'UNDO'"
              content="延期"
              placement="top"
            >
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_DELAY'" link type="primary" icon="Timer" @click="handleDelayRectify(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="scope.row.rectifyStatus === 'DONE' || scope.row.rectifyStatus === 'FINISHED'" content="改善管理" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_TO_IMPROVE'" link type="primary" icon="DocumentChecked" @click="handleToImprove(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="scope.row.rectifyStatus === 'DONE' && reportUserName == scope.row.reportUser" content="驳回" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_REJECT'" link type="primary" icon="Close" @click="handleReject(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="scope.row.rectifyStatus === 'DONE' && reportUserName == scope.row.reportUser" content="确认完成" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_FINISH'" link type="primary" icon="Check" @click="handleFinish(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="scope.row.rectifyStatus === 'DONE' && scope.row.missingOwnerList?.includes(userId + '')" content="撤销" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_DEFECT_ABORT'" link type="primary" icon="Rollback" @click="handleAbort(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :class="isFromHandover ? 'handover-pagination' : 'equip-table-pagination'"
        :total="total"
        @pagination="queryTable"
      />
      <px-image-viewer v-if="photoShow" hide-on-click-modal :draggable="false" :url-list="viewerPhotoList" @close="photoShow = false" />
    </div>
    <!-- 详情新增/编辑页面 -->
    <AddDefectDetail
      :isMain="isMain"
      :isView="isView"
      :drawerType="drawerType"
      :missingId="missingId"
      :missingLevelList="missingLevelList"
      :missingTypeList="missingTypeList"
      :missingResourceList="missingResourceList"
      :alarmId="alarmId"
      isFrom="defect"
      @queryTable="queryTable"
      @backMainPage="backMainPage"
    />
    <!-- 详情查看页面 -->
    <ViewDefectDetail
      :isMain="isMain"
      :isView="isView"
      :userId="userId"
      :reportUserName="reportUserName"
      :missingId="missingId"
      :missingLevelList="missingLevelList"
      :missingTypeList="missingTypeList"
      :missingResourceList="missingResourceList"
      :rectifyStatusList="rectifyStatusList"
      @backMainPage="backMainPage"
      @queryTable="queryTable"
      @toEditPage="toEditPage"
    />
    <!-- 整改弹窗 -->
    <RectifyDialog
      :dialogVisible="rectifyVisible"
      :missingId="missingId"
      @closeDialog="
        rectifyVisible = false;
        queryTable();
      "
    />
    <!-- 回复整改日期 -->
    <ReplyRectifyDateDialog
      :dialogVisible="replyRectifyDateVisible"
      :missingId="missingId"
      @closeDialog="
        replyRectifyDateVisible = false;
        queryTable();
      "
    />
    <!-- 驳回 -->
    <RejectDialog
      :dialogVisible="rejectVisible"
      :missingId="missingId"
      @closeDialog="
        rejectVisible = false;
        queryTable();
      "
    />
    <!-- 延期整改 -->
    <DelayRectifyDialog
      :dialogVisible="delayRectifyVisible"
      :missingId="missingId"
      @closeDialog="
        delayRectifyVisible = false;
        queryTable();
      "
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_SAFEMANAGE_DEFECT"
});
import { changeRectifyStatusDefect, editDefect, getEnumDefect, queryDefect } from "@/api/defect";
import { getTableData } from "@/api/system/positionManage";
import { getEmployeeIdAndName, showRowText } from "@/utils/pengxi";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import EquipSystemTree from "@/views/all/equip/components/EquipSystemTree.vue";
import { PxMessageBox } from "px-ui";
import { onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import AddDefectDetail from "./components/AddDefectDetail.vue";
import DelayRectifyDialog from "./components/DelayRectifyDialog.vue";
import RectifyDialog from "./components/RectifyDialog.vue";
import RejectDialog from "./components/RejectDialog.vue";
import ReplyRectifyDateDialog from "./components/ReplyRectifyDateDialog.vue";
import ViewDefectDetail from "./components/ViewDefectDetail.vue";

const route = useRoute();
const router = useRouter();
const tagColorList = {
  UNRESPONSE: "#EF4444", // 未响应
  UNDO: "#F59E0B", // 待整改
  DOING: "#3B82F6", // 整改中
  DELAY: "#EF4444", // 延期整改
  DONE: "#10B981", // 整改完成
  FINISHED: "#10B981" // 完结
};
const tagBorderColorList = {
  UNRESPONSE: "#FAC7C7", // 未响应
  UNDO: "#FCE2B6", // 待整改
  DOING: "#C6E2FF", // 整改中
  DELAY: "#FAC7C7", // 延期整改
  DONE: "#B7EAD9", // 整改完成
  FINISHED: "#B7EAD9" // 完结
};
const tagBgColorList = {
  UNRESPONSE: "#FEECEC", // 未响应
  UNDO: "#FEF5E6", // 待整改
  DOING: "#ECF5FF", // 整改中
  DELAY: "#FEECEC", // 延期整改
  DONE: "#E8F8F3", // 整改完成
  FINISHED: "#E8F8F3" // 完结
};
const state = reactive<any>({
  isMain: true, // 主页面true 详情页面false
  isView: true, // 查看true 新增/编辑false
  tabList: [
    { value: "UNRESPONSE", label: "未响应" },
    { value: "UNDO", label: "待整改" },
    { value: "DOING", label: "整改中" },
    { value: "DELAY", label: "延期整改" },
    { value: "DONE", label: "整改完成" },
    { value: "FINISHED", label: "完结" }
  ],
  missingLevelList: [],
  missingTypeList: [],
  missingResourceList: [],
  reportUserList: [],
  rectifyStatusList: [],
  missingOwnerList: [],
  queryParams: {
    missingDesc: "",
    rectifyStatusList: [],
    className: "",
    systemCode: "",
    missingLevel: "",
    missingType: "",
    reportUserId: null,
    reportUser: "",
    missingOwner: null,
    startTime: "",
    endTime: "",
    finishStartTime: "",
    finishEndTime: "",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    // { prop: "missingId", label: "缺失编号", minWidth: "160", showOverflowTooltip: true, fixed: "left", missingId: true },
    { prop: "rectifyStatus", label: "状态", minWidth: "100", showOverflowTooltip: true, rectifyStatus: true },
    { prop: "classNameDesc", label: "科室", minWidth: "70", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "140", showOverflowTooltip: true },
    { prop: "missingLevel", label: "缺失等级", minWidth: "80", showOverflowTooltip: true, missingLevel: true },
    { prop: "missingTypeDesc", label: "缺失类别", minWidth: "80", showOverflowTooltip: true },
    { prop: "missingDesc", label: "缺失描述", minWidth: "160", showOverflowTooltip: false, missingDesc: true },
    { prop: "missingPictureList", label: "缺失照片", minWidth: "140", showOverflowTooltip: false, missingPictureList: true },
    // { prop: "missingPositionDescAll", label: "缺失位置", minWidth: "200", showOverflowTooltip: true },
    { prop: "reportUser", label: "上报人", minWidth: "120", showOverflowTooltip: true },
    { prop: "reportTime", label: "上报时间", minWidth: "100", showOverflowTooltip: true, reportTime: true },
    { prop: "missingOwnerNameList", label: "责任人", minWidth: "120", showOverflowTooltip: true, missingOwnerNameList: true },
    { prop: "rectifyTime", label: "结案时间", minWidth: "100", showOverflowTooltip: true, rectifyTime: true }
  ],
  tableData: [],
  total: 0,
  userId: "",
  reportUserName: "",
  missingId: "",
  rectifyVisible: false,
  replyRectifyDateVisible: false,
  rejectVisible: false,
  delayRectifyVisible: false,
  systemCodes: [],
  photoShow: false,
  viewerPhotoList: [],
  drawerType: "add",
  positionList: [],
  alarmId: "",
  isFromHandover: false
});
const {
  isMain,
  isView,
  tabList,
  missingLevelList,
  missingTypeList,
  missingResourceList,
  reportUserList,
  rectifyStatusList,
  missingOwnerList,
  queryParams,
  tableColumns,
  tableData,
  total,
  userId,
  reportUserName,
  missingId,
  rectifyVisible,
  replyRectifyDateVisible,
  rejectVisible,
  delayRectifyVisible,
  systemCodes,
  photoShow,
  viewerPhotoList,
  drawerType,
  positionList,
  alarmId,
  isFromHandover
} = toRefs(state);

// 进入页面时触发
onMounted(() => {
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  userId.value = userInfo.userId;
  reportUserName.value = userInfo.username + "-" + userInfo.realName;
  isFromHandover.value = false;
  // 来源于报警
  if (route?.query && route?.query?.source && route?.query?.source === "alarm") {
    isMain.value = false;
    isView.value = false;
    alarmId.value = route?.query?.id || "";
    drawerType.value = "add";
    querySelect();
    return;
  }
  // 来源于交接班
  if (route?.query && route?.query?.source && route?.query?.source === "handover") {
    isFromHandover.value = true;
    isMain.value = true;
    isView.value = true;
    queryParams.value.className = route?.query?.className;
    querySelect();
    queryTable();
    return;
  }
  // 来源于四科
  if (route?.query && route?.query?.className) {
    isMain.value = true;
    isView.value = true;
    queryParams.value.className = route?.query?.className;
    queryParams.value.missingType = route?.query?.missingType || "";
    queryParams.value.startTime = route?.query?.startTime || "";
    queryParams.value.endTime = route?.query?.endTime || "";
    queryParams.value.reportDate = [queryParams.value.startTime, queryParams.value.endTime];
    queryParams.value.finishStartTime = route?.query?.finishStartTime || "";
    queryParams.value.finishEndTime = route?.query?.finishEndTime || "";
    queryParams.value.finishDate = [queryParams.value.finishStartTime, queryParams.value.finishEndTime];
    queryParams.value.rectifyStatusList = route?.query?.status ? route?.query?.status?.split("-") : [];
    querySelect();
    queryTable();
    return;
  }
  if (route?.query && route?.query?.id) {
    missingId.value = route?.query?.id;
    isMain.value = false;
    isView.value = true;
    querySelect();
  } else {
    isMain.value = true;
    isView.value = true;
    querySelect();
    queryTable();
  }
});
// 获取下拉框
const querySelect = async () => {
  const list = await getEnumDefect();
  missingLevelList.value = Object.keys(list?.MISSING_LEVEL).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_LEVEL[item]
  }));
  missingTypeList.value = Object.keys(list?.MISSING_TYPE).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_TYPE[item]
  }));
  missingResourceList.value = Object.keys(list?.MISSING_RESOURCE).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_RESOURCE[item]
  }));
  rectifyStatusList.value = Object.keys(list?.RECTIFY_STATUS).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.RECTIFY_STATUS[item]
  }));
};
// 获取当前科室上报人接口
const focusReportUser = async () => {
  const param = queryParams.value.className ? [queryParams.value.className] : [];
  const data = await getEmployeeIdAndName(param);
  reportUserList.value = JSON.parse(JSON.stringify(data));
};
// 获取当前科室责任人接口
const focusMissingOwner = async () => {
  const param = queryParams.value.className ? [queryParams.value.className] : [];
  const data = await getEmployeeIdAndName(param);
  missingOwnerList.value = JSON.parse(JSON.stringify(data));
};
// 获取开始日期及结束日期
const changeDate = val => {
  if (val && val.length > 0) {
    queryParams.value.startTime = val[0] + " 00:00:00";
    queryParams.value.endTime = val[1] + " 23:59:59";
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
};
// 获取结案开始日期及结束日期
const changeFinishDate = val => {
  if (val && val.length > 0) {
    queryParams.value.finishStartTime = val[0] + " 00:00:00";
    queryParams.value.finishEndTime = val[1] + " 23:59:59";
  } else {
    queryParams.value.finishStartTime = "";
    queryParams.value.finishEndTime = "";
  }
};

// 获取reportUser
const reportUserChange = val => {
  const arr = reportUserList.value.filter(item => {
    return item.value === val;
  });
  if (arr && arr.length > 0) {
    queryParams.value.reportUser = arr[0].label;
  } else {
    queryParams.value.reportUser = "";
  }
};
// 查询备件列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  params.systemCodes = systemCodes.value;
  const data = await queryDefect(params);
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 图片预览
const photoPreview = (pictures, file) => {
  photoShow.value = true;
  const index = pictures.indexOf(file);
  let viewerList = [...pictures];
  let tempList = [];
  for (let i = 0; i < index; i++) {
    tempList.push(viewerList.shift());
  }
  viewerPhotoList.value = viewerList.concat(tempList).map(file => file.url || file.fileUrl);
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    rectifyStatusList: [],
    className: "",
    systemCode: "",
    missingLevel: "",
    missingType: "",
    reportUserId: null,
    reportUser: "",
    missingOwner: null,
    startTime: "",
    endTime: "",
    finishStartTime: "",
    finishEndTime: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  systemCodes.value = [];
  queryTable();
};
// 新增缺失
const defectReport = () => {
  drawerType.value = "add";
  isMain.value = false;
  isView.value = false;
};
// 查看详情
const handleView = (row: any) => {
  missingId.value = row.missingId;
  isMain.value = false;
  isView.value = true;
};
// 编辑详情
const handleEdit = (row: any) => {
  drawerType.value = "edit";
  missingId.value = row.missingId;
  isMain.value = false;
  isView.value = false;
};
// 回复整改日期
const handleReplyRectifyDate = (row: any) => {
  missingId.value = row.missingId;
  replyRectifyDateVisible.value = true;
};
// 整改弹窗
const handleRectify = (row: any) => {
  missingId.value = row.missingId;
  rectifyVisible.value = true;
};
// 延期整改
const handleDelayRectify = (row: any) => {
  missingId.value = row.missingId;
  delayRectifyVisible.value = true;
};
// 整改中
const handleDoing = (row: any) => {
  PxMessageBox.confirm("要将整改状态变更为“整改中”吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        missingId: row.missingId,
        rectifyStatus: "DOING"
      };
      await changeRectifyStatusDefect(params);
      queryTable();
    })
    .catch(() => {});
};

// 驳回
const handleReject = (row: any) => {
  missingId.value = row.missingId;
  rejectVisible.value = true;
};
// TODO 删除
const handleDelete = (row: any) => {
  PxMessageBox.confirm("您将删除该条缺失，删除后该条缺失将被撤回并删除且不可恢复，请确认是否删除", "删除确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        missingId: row.missingId,
        status: "INVALID"
      };
      await editDefect(params);
      queryTable();
    })
    .catch(() => {});
};
// 确认完成
const handleFinish = row => {
  PxMessageBox.confirm("确认整改完成后，该缺失整改项正式终止，不再允许修改，请确认", "整改完成确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        missingId: row.missingId,
        rectifyStatus: "FINISHED"
      };
      await changeRectifyStatusDefect(params);
      queryTable();
    })
    .catch(() => {});
};
// 撤销
const handleAbort = row => {
  PxMessageBox.confirm("您将对本次整改完成情况进行撤销，撤销后回退为整改中状态并可对整改结果进行修改", "撤销确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        missingId: row.missingId,
        rectifyStatus: "DOING"
      };
      await changeRectifyStatusDefect(params);
      queryTable();
    })
    .catch(() => {});
};
// 跳转到改善管理
const handleToImprove = (row: any) => {
  const path = "/all/safeManage/improve";
  router.push({
    path: path,
    query: { id: row.missingId }
  });
};
// 从新增/编辑、详情返回主页面
const backMainPage = () => {
  isMain.value = true;
  if (route?.query && route?.query?.id) {
    router.push({ query: {} });
  }
};
// 从详情到编辑页面
const toEditPage = val => {
  isMain.value = false;
  isView.value = false;
  drawerType.value = "edit";
  missingId.value = val;
  querySelect();
};
// 获取位置信息
const focusPosition = async () => {
  const data = await getTableData({});
  positionList.value = data || [];
};
// 选中位置信息
const nodeClick = e1emData => {
  queryParams.value.className = "";
  queryParams.value.systemCode = "";
  systemCodes.value = [];
};
// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
  queryParams.value.systemCode = "";
  systemCodes.value = [];
  queryParams.value.reportUserId = "";
  queryParams.value.missingOwner = "";
};
// 系统组件调用父组件
const changeSystemCodes = (val, val2) => {
  queryParams.value.systemCode = val;
  systemCodes.value = val2;
};
// 系统组件调用父组件
const changeAllSystemCodes = (val, val2, val3, val4) => {
  queryParams.value.className = val2;
  queryParams.value.systemCode = val3;
  systemCodes.value = val4;
};
// 系统组件值改变触发
const clearSystem = val => {
  queryParams.value.systemCode = "";
  systemCodes.value = [];
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.table-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:deep(.px-image-viewer__wrapper) {
  .px-image-viewer__prev {
    top: calc(100vh - 74px);
    left: calc(50% + 98px);
    transform: translateY(0);
  }

  .px-image-viewer__next {
    top: calc(100vh - 74px);
    left: calc(50% + 150px);
    transform: translateY(0);
  }

  .px-image-viewer__actions {
    left: calc(50% - 52px);
  }
}

.handover-pagination {
  position: relative;
  right: -16px;
  bottom: auto;
  width: 100%;
  margin-top: 12px;
}
</style>
